import useForm from "@module/useForm";
import UrlHooks from "pages/ruijing/common/utils/urlHook";
import Base64 from "@module/Base64";
import warning from '../../../../../imgs/icon_warning.png';
import matchError from '../../../../../imgs/icon_error.png';
import isMatched from '../../../../../imgs/icon_checkSuccess.png';
import "./style.css";

export default function AddDeptForm(props) {
    console.log(props);
    //定义表单 useForm（回调，默认值，表单名）
    const { formData, handleChange, handleSubmit,updateFormData, validations, addValidate, addValidateMulti } = useForm(
        doSubmit,
        {},
        "addDeptForm"
    );

    //定义全局变量 const [scope值，更新方法] = React.useState({初始化的值});
    const [formStatus, updateFormStatus] = React.useState({
        errorReason: "",
        newDeptIsMatch:false,
        piName:"测试PI",
        departmentId:-1,
        submitStatus:0
    });

    //更新视图数据 私有的方法前缀用_
    function _updateData(value) {
        let newValue = { ...formStatus, ...value };
        console.log(newValue);
        updateFormStatus(newValue);
    }

    React.useEffect(() => {
        console.log("refresh view");
        console.log(formData);
    });

    //提交事件
    function doSubmit() {
        console.log("doSubmit",props);

        let loginUrl = "/store/api/apply/queryPI";
        if(formStatus.newDeptIsMatch){
            loginUrl = "/store/api/apply/joinDepartment"
        }
        let loginData = {};
        if(formStatus.newDeptIsMatch){
            loginUrl = "/store/api/apply/joinDepartment";
            loginData = {
                jobNumber: formData==undefined?"":formData.picode, //PI工号
                purchaserId: Uts.getCookie("id"), //采购人ID
                departmentId:formStatus.departmentId //课题组id
            };
        }else{
            loginData = {
                jobNumber: formData==undefined?"":formData.picode, //PI工号
                fundCardNo: formData==undefined?"":formData.fundcardcode, //经费卡号
                email: formData==undefined?"":formData.email, //邮箱地址
                mobile: formData==undefined?"":formData.tel, //手机号
                purchaserId: Uts.getCookie("id"), //采购人ID
                orgId: Uts.getCookie("orgId"), //医院ID
            };
        }
        loginData = JSON.parse(JSON.stringify(loginData));
        _updateData(
            (formStatus.submitStatus = 1)
        );
        REST.post(loginUrl, loginData, "noInfo").then(
            function(data) {
                console.log(data);
                if(formStatus.newDeptIsMatch) {
                    if (data.code == "0000") {
                        console.log("newDeptIsMatch",props);
                        let newDept = [];
                        newDept.push(formStatus.departmentId);
                        props.item.close();
                        props.item.getDeptsW(newDept);
                    } else {
                        _updateData(
                            (formStatus.errorReason = data.message),
                            (formStatus.newDeptIsMatch = false),
                            (formStatus.submitStatus = 0)
                        );
                    }
                }else{
                    if (data.code == "0000") {
                        _updateData(
                            (formStatus.newDeptIsMatch = true),
                            (formStatus.piName = data.piName),
                            (formStatus.departmentId = parseInt(data.departmentId)),
                            (formStatus.submitStatus = 0)
                        );
                    } else {
                        _updateData(
                            (formStatus.errorReason = data.message),
                            (formStatus.submitStatus = 0)
                        );
                    }
                }
            },
            function(error) {
                console.log(error);
                console.log(error.response.data);
                _updateData(
                    (formStatus.errorReason = "接口请求状态："+error.response.status),
                    (formStatus.submitStatus = 0)
                );
            }
        );
    }

    function beforeHandleChange(event) {
        _updateData((formStatus.errorReason = ""))
        handleChange(event);
    }

    function validate1(value) {
        if(value==""||value==null||value==undefined){
            _updateData(
                (formStatus.submitStatus = 1)
            );
            return "请填写课题组必要信息";
        }else{
            _updateData(
                (formStatus.submitStatus = 0)
            );
            return ""
        }
    }

    function validate2(value){
        let pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        console.log(value,pattern.test(value));
        if(value==""||value==null||value==undefined){
            _updateData(
                (formStatus.submitStatus = 1)
            );
            return "请填写课题组必要信息";
        }else{
            if(pattern.test(value)){
                _updateData(
                    (formStatus.submitStatus = 0)
                );
                return ""
            }else{
                _updateData(
                    (formStatus.submitStatus = 1)
                );
                return "请填写正确格式的邮箱地址"
            }
            //return pattern.test(value)?"":"请填写正确格式的邮箱地址";
        }
    }

    function validate3(value){
        let pattern = /^1[3456789]\d{9}$/;
        console.log(value,pattern.test(value));
        if(value==""||value==null||value==undefined){
            _updateData(
                (formStatus.submitStatus = 1)
            );
            return "请填写课题组必要信息";
        }else{
            if(pattern.test(value)){
                _updateData(
                    (formStatus.submitStatus = 0)
                );
                return ""
            }else{
                _updateData(
                    (formStatus.submitStatus = 1)
                );
                return "请填写正确格式的手机号码"
            }
            //return pattern.test(value)?"":"请填写正确格式的手机号码";
        }
    }

    addValidateMulti({picode:[validate1],fundcardcode:[validate1],email:[validate2],tel:[validate3]});

    return(
        <div>
            <form
                name="addDeptForm"
                className="zen_t-70 zen_r-0 zen_z-i-99 zen_bdr-8 zen_p-35 zen_p-b-15 zen_p-t-15"
                onSubmit={handleSubmit}
            >
                <div className={formStatus.newDeptIsMatch?"zen_hide":"zen_m-b-30"}>
                    <div className="zen_il-bl zen_w-100"><span className="zen_F5222D zen_m-2">*</span>PI人事编号</div>
                    <input
                        className={(!formData.$$status.hasOwnProperty("picode"))||formData.$$status.picode==""?"zen_w-350 zen_h-32 zen_l-h-32 zen_p-h-25 zen_bd-D1D1D1 zen_m-l-30 zen_bdr-5":"zen_w-350 zen_h-32 zen_l-h-32 zen_p-h-25 zen_bd-FF0000 zen_m-l-30 zen_bdr-5"}
                        name="picode"
                        type="text"
                        value={formData.picode}
                        onChange={beforeHandleChange}
                        required
                    />
                    <i className={(!formData.$$status.hasOwnProperty("picode"))||formData.$$status.picode==""?"zen_hide":"warnning"}></i>
                    <br />
                    <div className="zen_red zen_m-l-130 zen_m-t-10">{formData.$$status.picode}</div>
                </div>
                <div className={formStatus.newDeptIsMatch?"zen_hide":"zen_m-b-30"}>
                    <div className="zen_il-bl zen_w-100"><span className="zen_F5222D zen_m-2">*</span>经费卡号</div>
                    <input
                        className={(!formData.$$status.hasOwnProperty("fundcardcode"))||formData.$$status.fundcardcode==""?"zen_w-350 zen_h-32 zen_l-h-32 zen_p-h-25 zen_bd-D1D1D1 zen_m-l-30 zen_bdr-5":"zen_w-350 zen_h-32 zen_l-h-32 zen_p-h-25 zen_bd-FF0000 zen_m-l-30 zen_bdr-5"}
                        name="fundcardcode"
                        type="text"
                        value={formData.fundcardcode}
                        onChange={beforeHandleChange}
                        required
                    />
                    <i className={(!formData.$$status.hasOwnProperty("fundcardcode"))||formData.$$status.fundcardcode==""?"zen_hide":"warnning"}></i>
                    <br />
                    <div className="zen_red zen_m-l-130 zen_m-t-10">{formData.$$status.fundcardcode}</div>
                </div>
                <div className={formStatus.newDeptIsMatch?"zen_hide":"zen_m-b-30"}>
                    <div className="zen_il-bl zen_w-100"><span className="zen_F5222D zen_m-2">*</span>PI电子邮箱</div>
                    <input
                        className={(!formData.$$status.hasOwnProperty("email"))||formData.$$status.email==""?"zen_w-350 zen_h-32 zen_l-h-32 zen_p-h-25 zen_bd-D1D1D1 zen_m-l-30 zen_bdr-5":"zen_w-350 zen_h-32 zen_l-h-32 zen_p-h-25 zen_bd-FF0000 zen_m-l-30 zen_bdr-5"}
                        name="email"
                        type="text"
                        value={formData.email}
                        onChange={beforeHandleChange}
                        required
                    />
                    <i className={(!formData.$$status.hasOwnProperty("email"))||formData.$$status.email==""?"zen_hide":"warnning"}></i>
                    <br />
                    <div className="zen_red zen_m-l-130 zen_m-t-10">{formData.$$status.email}</div>
                </div>
                <div className={formStatus.newDeptIsMatch?"zen_hide":"zen_m-b-30"}>
                    <div className="zen_il-bl zen_w-100"><span className="zen_F5222D zen_m-2">*</span>PI手机号码</div>
                    <input
                        className={(!formData.$$status.hasOwnProperty("tel"))||formData.$$status.tel==""?"zen_w-350 zen_h-32 zen_l-h-32 zen_p-h-25 zen_bd-D1D1D1 zen_m-l-30 zen_bdr-5":"zen_w-350 zen_h-32 zen_l-h-32 zen_p-h-25 zen_bd-FF0000 zen_m-l-30 zen_bdr-5"}
                        name="tel"
                        type="text"
                        value={formData.tel}
                        onChange={beforeHandleChange}
                        required
                    />
                    <i className={(!formData.$$status.hasOwnProperty("tel"))||formData.$$status.tel==""?"zen_hide":"warnning"}></i>
                    <br />
                    <div className="zen_red zen_m-l-130 zen_m-t-10">{formData.$$status.tel}</div>
                </div>
                <div className={formStatus.newDeptIsMatch?"zen_hide":"zen_m-b-20 zen_red zen_m-l-130"}>
                    <img className={formStatus.errorReason == ""?"zen_hide":"zen_il-bl zen_m-r-10 zen_v-t"} src={matchError}></img>{formStatus.errorReason == ""?"":formStatus.errorReason}
                </div>
                <div className={formStatus.newDeptIsMatch?"zen_bl zen_m-t-80 zen_m-b-50 zen_t-c":"zen_hide"}>
                    <img className="zen_h-50 zen_w-50" src={isMatched}></img>
                    <div className="zen_m-30 ">该PI人事编号对应人姓名是<span className="zen_red">{formStatus.piName}</span>，确定加入该课题组吗？</div>
                </div>
                <div className="zen_t-c">
                    <button type="submit" className={formStatus.submitStatus==0?"h-button-primary h-modal-conBtn h-button-button":"h-button-button h-button-primary h-button-disabled"} disabled={formStatus.submitStatus==0?false:true}>
                        确认
                    </button>
                    <div onClick={props.item.close} className="h-button-button h-button-sub h-modal-canBtn">
                        取消
                    </div>
                </div>
            </form>
        </div>
    )
}